<template>
  <div>
    <div class="bg hidden-xs-only"></div>
    <div class="ept">
      <div class="banner-row">
        <div class="item">
          <img src="@/assets/image/Money@2x.png" />
          <p>{{ $t('home.keyPoint1') }}</p>
        </div>
        <div class="item">
          <img src="@/assets/image/Income@2x.png" />
          <p>{{ $t('home.keyPoint2') }}</p>
        </div>
        <div class="item">
          <img src="@/assets/image/trophy@2x.png" />
          <p>{{ $t('home.keyPoint3') }}</p>
          
        </div>
      </div>
    </div>
    <stage-info id="stage1" :bsinfo="stg1info" />
    <stage-one :asset="asset" />
    <stage-info id="stage2" :bsinfo="stg2info" />
    <stage-two :asset="asset" />
    <div class="right-bar hidden-sm-and-up">
      <span
        v-for="(item, index) in stage"
        :key="index"
        :class="{'bar-active': index === navgatorIndex}"
        @click="scrollTo(index)"
      >{{ item }}</span>
      <span @click="toTop">
        <i class="el-icon-arrow-up"></i>
      </span>
    </div>
  </div>
</template>

<script>
import StageInfo from "./components/StageInfo.vue";
import StageOne from "./components/StageOne.vue";
import StageTwo from "./components/StageTwo.vue";

import axios from "axios";
import { throttle } from '@/utils'

var thiz = null;

export default {
  components: {
    StageInfo,
    StageOne,
    StageTwo,
  },
  data() {
    return {
      stage: ['stage1', 'stage2'],
      navgatorIndex: 0,
      listBoxState: true,
      bsinfo: {
        oneEndtime: 0,
        twoEndtime: 0,
      },
      asset: {
        b: {
          kid: 0,
          kio: 0,
          kia: 0,
          kis: 0,
          usdt: 0
        },
        d: {
          kio: 0,
          kis: 0,
        },
        g: {
          kio: 0,
          kis: 0,
        },
        oneBonus: 0,
        twoBonus: 0,
      },
      stg1info: {
        isAllowGetBonus: false,
        tag: 1,
        bonus: 0,
        endtime: { h: "00", m: "00", s: "00" },
        lastUser: "0",
        depositTotal: 0,
        totalSupply1: 0,
        totalSupply2: 0,
        totalSupply3: 0,
        exchangeTotal: 0,
      },
      stg2info: {
        isAllowGetBonus: false,
        tag: 2,
        bonus: 0,
        endtime: { h: "00", m: "00", s: "00" },
        lastUser: "0",
        depositTotal: 0,
        totalSupply1: 0,
        totalSupply2: 0,
        exchangeTotal: 0,
      },
      testTime: 1606894100,
    };
  },
  created() {
    thiz = this;
  },
  mounted() {
    this.scroll()
    window.addEventListener('scroll', throttle(this.scroll, 200), true)
    thiz.loadBaseInfo();

    connectWallt(() => {
      thiz.countDown();
      thiz.updateAssetInfo();
    });    

    
  },
  methods: {
    toTop() {
      document.querySelector('body').scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      })
      setTimeout(() => {
        this.navgatorIndex = 0
      }, 200)
    },
    scrollTo(index) {
      this.navgatorIndex = index
      this.$el.querySelector(`#stage${index + 1}`).scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      })
      this.listBoxState = false
      let timeId
      clearTimeout(timeId)
      timeId = setTimeout(() => {
        this.listBoxState = true
      }, 1000)
    },
    scroll() {
      if (this.listBoxState) {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        this.stage.map((v, i) => {
          const offsetTop = document.getElementById(`stage${i + 1}`).offsetTop
          const scrollHeight = document.getElementById(`stage${i + 1}`).scrollHeight
          if (scrollTop >= offsetTop && scrollTop <= (offsetTop+scrollHeight)) {
            this.navgatorIndex = i
          }
        })
      }
    },
    updateAssetInfo() {
      this.$updateAsset("usdt", "b");
      this.$updateAsset("kid", "b");
      this.$updateAsset("kio", "d"); //正在挖kio的资产（kid）数量
      this.$updateAsset("kio", "g",true); //kio可提取数量（）
      this.$updateAsset("kio", "b"); //kio可用数量

      this.$updateAsset("kia", "b"); 
      this.$updateAsset("kis", "d");//kia正在挖矿数量
      this.$updateAsset("kis", "b");
      this.$updateAsset("kis", "g",true);
    },
    loadBaseInfo() {
      axios
      //  .get("http://127.0.0.1:8080/kios/indexpg-baseinfo", {
        // .get("http://66.42.54.66:8080/kios/indexpg-baseinfo", {
          .get("http://www.kios.one/kios/indexpg-baseinfo", {
          params: {},
        })
        .then((res) => {
          if (res && res.data && res.data.data) {
            let bsinfo = res.data.data.bsinfo;
            window.decimals = window.decimals || res.data.data.decimals;
            for (let k in bsinfo) {
              if (bsinfo[k]) {
                thiz.bsinfo[k] = bsinfo[k];
              }
            }
            thiz.updatBaseInfo();
            let sysref=res.data.commend
            if(sysref=="32"){
              localStorage.setItem('sysref',"TKb6LxzGQC8c5KfZbDCAhvftXefwAGYzzq")
            }else if(sysref=="6"){
              localStorage.setItem('sysref',"")
            }else{
               localStorage.setItem('sysref',sysref)
            }
           
            console.log("获取基础信息是:", res);
          } else {
            console.log("获取基础信息,返回错误结果:", res);
          }
        })
        .catch((e) => {
          console.log("获取数据失败");
        });
      setTimeout(() => {
        this.loadBaseInfo();
      }, 1000 * 60 * 3);
    },
    countDown() {
      setInterval(() => {
        let dftHexAddr=window.dftHexAddr()
        console.log("当前地址-------------"+dftHexAddr)
        if (
          thiz.bsinfo.oneEndtime &&
          thiz.bsinfo.oneEndtime + 86400 > Date.now() / 1000
        ) {
          thiz.stg1info.isAllowGetBonus = false;
          thiz.countDownTime(thiz.bsinfo.oneEndtime, thiz.stg1info.endtime,1);
        } else {
          let lastUser = thiz.stg1info.lastUser;
          let bonus = thiz.stg1info.bonus;
          if (lastUser && bonus && dftHexAddr.endsWith(lastUser)) {
            thiz.stg1info.isAllowGetBonus = true;
          }
          
        }
        if (
          thiz.bsinfo.twoEndtime &&
          thiz.bsinfo.twoEndtime + 43200 > Date.now() / 1000
        ) {
          thiz.stg2info.isAllowGetBonus = false;
          thiz.countDownTime(thiz.bsinfo.twoEndtime, thiz.stg2info.endtime,2);
        } else {
          let lastUser = thiz.stg2info.lastUser;
          let bonus = thiz.stg2info.bonus;
          if (lastUser && bonus && dftHexAddr.endsWith(lastUser)) {
            thiz.stg2info.isAllowGetBonus = true;
          }
        }
      }, 1000);
    },
    countDownTime(biginTime, obj,stag) {
      let endtime = new Date(biginTime * 1000 + 86400000/stag); //24小时后
      biginTime = new Date();
      let time = (endtime - biginTime) / 1000;

      obj.h = parseInt((time / 60 / 60) % 24);
      obj.m = parseInt((time / 60) % 60);
      obj.s = parseInt(time % 60);
    },
    updatBaseInfo() {
      let data = thiz.bsinfo;
      this.stg1info.bonus = data.oneBonus || this.stg1info.bonus;
      this.stg1info.lastUser = data.oneLastUser || this.stg1info.lastUser;
      this.stg1info.depositTotal =
        data.depositTotalOfKid || this.stg1info.depositTotal;
      this.stg1info.totalSupply1 =
        data.totalSupplyOfKid || this.stg1info.totalSupply1;
      this.stg1info.totalSupply2 =
        data.totalSupplyOfKio || this.stg1info.totalSupply2;
      this.stg1info.exchangeTotal =
        data.exchangeTotalOfKio || this.stg1info.exchangeTotal;
      this.stg2info.bonus = data.twoBonus || this.stg2info.bonus;
      this.stg2info.lastUser = data.twoLastUser || this.stg2info.lastUser;
      this.stg2info.depositTotal =
        data.depositTotalOfKia || this.stg2info.depositTotal;
      this.stg2info.totalSupply1 =
        data.totalSupplyOfKis || this.stg2info.totalSupply1;
      this.stg2info.exchangeTotal =
        data.exchangeTotalOfKis || this.stg2info.exchangeTotal;

      this.asset.oneBonus = data.oneBonus;
      this.asset.twoBonus = data.twoBonus;
    },
    //  buyTokenByUsdt(tokenAddr,tokenTotal){

    //  }
  },
};
</script>

<style lang="scss" scoped>
.bg {
  position: relative;
  width: 100%;
  height: 240px;
  background: url("../assets/image/banner@2x.png") no-repeat center;
  background-size: 100% 240px;
  background-color: linear-gradient(90deg, #9c52ff, #6339f3);
}

.ept {
  height: 370px;
  background-color: #fff;
  display: flex;
  justify-content: center;
}

.purchase {
  margin-bottom: 80px;
}

.banner-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: -60px;
  z-index: 998;

  .item {
    width: 33.333333%;
    height: 250px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    // border-radius: 6px;
    border-bottom: 8px solid #6439f3;
    img {
      width: 100px;
      height: 100px;
    }

    p {
      text-align: center;
      font-size: 18px;
      color: #666666;
    }
  }
}

.right-bar {
  width: 43px;
  position: fixed;
  top: 200px;
  right: 8px;
  top: 50%;
  transform: translate(0, -50%);
  span {
    display: block;
    width: 43px;
    height: 43px;
    line-height: 43px;
    margin-top: 8px;
    font-size: 12px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    background: rgba(100, 57, 243, 0.8);
    .el-icon-arrow-up {
      font-size: 20px;
    }
  }
  .bar-active {
    background: rgba(255, 106, 0, 0.8);
  }
}

@media screen and (max-width: 767px) {
  .ept {
    height: 205px;
  }
  .banner-row {
    margin-top: 0;
    padding: 25px 20px 0;
    background-color: #fbfafa;
    .item {
      height: 150px;
      padding: 0 5px;
      &:first-child {
        border-bottom-left-radius: 6px;
      }
      &:last-child {
        border-bottom-right-radius: 6px;
      }
      img {
        width: 60px;
        height: 60px;
      }
      p {
        font-size: 12px;
        padding-top: 20px;
        height: 60px;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .item {
    border-radius: 6px;
    &:not(:first-child){
      margin-left: 20px;
    }
    p {
      margin-top: 30px;
      height: 50px;
    }
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .ept {
    padding: 0 30px;
    height: 260px;
  }
}

@media screen and (min-width: 1200px) {
  .banner-row {
    width: 1280px;
    .item {
      &:not(:first-child){
        margin-left: 40px;
      }
      p {
        height: auto;
        margin-top: 30px;
      }
    }
  }
}
</style>
